<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
	<head>
    	<title>Graphe teleinfo jQuery</title>
		
		<link rel="stylesheet" type="text/css" href="dist/jquery.jqplot.css" />
		<link rel="stylesheet" href="dist/themes/base/jquery.ui.all.css">
		
		<script src="dist/jquery-1.7.2.min.js"></script>
		<script src="dist/ui/jquery.ui.core.js"></script>
		<script src="dist/ui/jquery.ui.widget.js"></script>
		<script src="dist/ui/jquery.ui.datepicker.js"></script>

		<!--<script language="javascript" type="text/javascript" src="dist/jquery-1.4.4.js"></script>
		<script language="javascript" type="text/javascript" src="dist/jquery-1.4.4.min.js"></script>-->
		<script language="javascript" type="text/javascript" src="dist/jquery.jqplot.js"></script>
		<script language="javascript" type="text/javascript" src="dist/plugins/jqplot.canvasAxisTickRenderer.js"></script>
		<script language="javascript" type="text/javascript" src="dist/plugins/jqplot.canvasTextRenderer.js"></script>
		<script type="text/javascript" language="javascript" src="dist/plugins/jqplot.dateAxisRenderer.js"></script>
		<script language="javascript" type="text/javascript" src="dist/plugins/jqplot.json2.min.js"></script>
		
		<script type="text/javascript" language="javascript">
		
			function updateSeries() {
		        plot6.series[0].data = jsonurl;
		        plot6.drawSeries({}, 1);
		        return false;
		    }
		
			var ajaxDataRenderer = function(url, plot, options) {
			    var ret = null;
			    $.ajax({
			      // have to use synchronous here, else the function 
			      // will return before the data is fetched
			      async: false,
			      url: url,
			      dataType:"json",
			      success: function(data) {
			        ret = data;
			      }
			    });
			    return ret;
			};
		
			var jsonurl = "./code_graphe.php";
		
			$(document).ready(function(){
			  $.jqplot.config.enablePlugins = true;		 
			  	  
			plot6 = $.jqplot('chartdiv', jsonurl ,{
				title:'Rotated Axis Text',
				dataRenderer: ajaxDataRenderer,
				dataRendererOptions: {
				  unusedOptionalUrl: jsonurl
				},
				axes:{
					xaxis:{
						renderer:$.jqplot.DateAxisRenderer, 
						rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
						tickOptions:{formatString:'%R', fontSize:'10pt', fontFamily:'Tahoma', angle:-40, fontWeight:'normal', fontStretch:1}
					}
				},
				series:[{lineWidth:2}]
			});
			
			$(".button").click(function() {  
			     $.ajax({  
					  async: false,
					  type: "GET",  
					  url: "./code_graphe.php",  
					  dataType: "json",  
					  success: function(data) { 
					    
						plot6.init = ajaxDataRenderer;
						plot6.drawSeries({}, 0);
					  }  
				});  
				return false;  		  
			});

			});
		</script>
	</head>
  	<body>
		<form action="#">
			<input type="submit" class="button" name="submit" value="Update" />
		</form>
		<div id="chartdiv" style="height:300px;width:400px; ">
	</body>
</html>